<script setup>
import 'animate.css';
</script>

<template>
    <div id="box">
        <router-view v-slot="{Component}">
            <transition enter-active-class="animate__animated animate__bounceInRight">
                <keep-alive>
                    <component :is="Component"></component>
                </keep-alive>    
            </transition>
        </router-view>
        <router-view name="FooterCom"></router-view>
    </div>

</template>

<style scoped></style>
<style lang="scss">
#box{
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
:root:root {
  --van-tab-font-size: 0.16rem;
  --van-tabs-bottom-bar-width: 0.3rem;
  --van-tabs-bottom-bar-height: 0.02rem;
  --van-tabs-bottom-bar-color: #FF644D;
  --van-tab-active-text-color: #FF644D;
  --van-popover-action-width: 1.6rem;
  .van-toast{
    background-color: rgba(0, 0, 0, .7);
  }
}

</style>
